<template>
    <div>
        <div class="center">
            <div class="zhengti">
                <div class="left">
                    <img :src="serveInfo.simg" alt="">
                </div>
                <div class="right">
                    <h3>{{serveInfo.title}}</h3>
                    <p class="fwsc" >
                        <div v-html="serveInfo.sdecr"></div>
                    </p>
                    <div class="jiage">
                        <span>{{serveInfo.show_price}}</span> 
                        <span>{{serveInfo.unit}}</span>
                    </div>
                    <div class="pingjia">
                        <span>{{ serveInfo.mname }}</span>
                        <span>已售{{serveInfo.salestotal}}</span>
                        <span>好评{{Math.round(serveInfo.estimate/serveInfo.salestotal*10000)/100}}%</span>
                    </div>
                </div> 
                <div class="zksm">
                    <p>最快上门</p>
                    <p>1小时</p>
                </div> 
            </div>        
        </div>
    </div>
</template>

<script setup lang="ts">
import sdList from '@/types/fwList';
interface propp{
       serveInfo:sdList;
    }
const props = defineProps<propp>()
console.log(props.serveInfo);
</script>

<style lang="scss" scoped>
  
.center{
    .zhengti{
        display: flex;
        align-items: center;
        height: 200px;
        width: 80%;
        background-color: #FFFFFF;
        position: relative;
        cursor: pointer;
        &:hover{
            background-color: #F8F8F8;
        }
        .left{
            img{
                display: block;
                width: 150px;
                margin: 25px 0 20px 30px;
                border-radius: 4px;
            } 
        }
        .right{
            margin-left: 30px;
            h3{
                font-size: 20px;
                margin-top: 15px;
            }
            p{
                padding: 20px 0;
                width: 600px;
                height: 18px;
                color: #929292;
                font-size: 14px;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }  
            .jiage{
                padding: 0 0 15px 0;               
                span{
                    color: #E02137;
                    font-weight: bold;
                    &:nth-child(1){
                        font-size: 25px;
                    }
                    &:nth-child(2){
                        font-size: 14px;
                    }
                }
            }
            .pingjia{
                 color: #929292;
                 font-size: 14px;
                 span{
                    display: inline-block;
                    padding: 0 10px;
                    &:nth-child(1){
                        padding-left: 25px;
                        background-image: url(../assets/icon/home1.png);
                        background-repeat: no-repeat;
                        
                    }
                 }
            }
        }
        .zksm{
            width: 65px;
            font-size: 12px;
            border: 1px solid red;
            border-radius: 8px;
            position: absolute;
            top: 10px;
            right: 10px;
            p{
               &:nth-child(1){
                    text-align: center;
                    background-color: #FF7871;
                    border-radius: 8px 8px 0 0;
                    color: white;
                } 
                &:nth-child(2){
                    text-align: center;
                    color: #FF7871;
                }
            }
        }
    }
}
</style>